<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 m-crm-config-set" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">流程设置</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="widget-body am-fr">
        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" :disabled="edit"
                    v-model="areaTeamId" placeholder="请选择区域">
          <el-option
            v-for="item in areaTeams"
            :key="item.areaTeamId"
            :label="item.name"
            :value="item.areaTeamId">
          </el-option>
        </el-select>
        <div class="form">
          <p class="theme">提醒设置</p>
          <div class="wrapper am-form-group">
            <div class="title">资源优先级：高</div>
            <div class="content" v-for="(item, index) in remindConfig.high">
              <span>
                提醒顺序{{index + 1}}：
              </span>
              岗位名称：<el-input class="job-name" v-model="item.jobName"></el-input>
              时间间隔：<el-input class="job-name" v-model="item.time"></el-input>分钟
              <span v-show="index + 1 === remindConfig.high.length">
                <i @click="handleAdd(remindConfig.high)" class="add-icon">+</i>
                <i @click="handleDel(remindConfig.high)" v-show="remindConfig.high.length > 1" class="del-icon">-</i>
              </span>
            </div>
            <div class="title">资源优先级：中</div>
            <div class="content" v-for="(item, index) in remindConfig.mid">
              <span>
                提醒顺序{{index + 1}}：
              </span>
              岗位名称：<el-input class="job-name" v-model="item.jobName"></el-input>
              时间间隔：<el-input class="job-name" v-model="item.time"></el-input>分钟
              <span v-show="index + 1 === remindConfig.mid.length">
                <i @click="handleAdd(remindConfig.mid)" class="add-icon">+</i>
                <i @click="handleDel(remindConfig.mid)" v-show="remindConfig.mid.length > 1" class="del-icon">-</i>
              </span>
            </div>
            <div class="title">资源优先级：低</div>
            <div class="content" v-for="(item, index) in remindConfig.low">
              <span>
                  提醒顺序{{index + 1}}：
                </span>
              岗位名称：<el-input class="job-name" v-model="item.jobName"></el-input>
              时间间隔：<el-input class="job-name" v-model="item.time"></el-input>分钟
              <span v-show="index + 1 === remindConfig.low.length">
                  <i @click="handleAdd(remindConfig.low)" class="add-icon">+</i>
                  <i @click="handleDel(remindConfig.low)" v-show="remindConfig.low.length > 1" class="del-icon">-</i>
                </span>
            </div>
          </div>
          <p class="theme">时间设置</p>
          <el-checkbox-group class="am-form-group" v-model="checkList">
            <el-checkbox :label="item" v-for="(item, index) in Object.keys(weeks)">
              {{item}}
              上午
              <el-time-select
                v-model="weeks[item][0]"
                :disabled="checkList.indexOf(item) === -1"
                :picker-options="{
                  start: '06:00',
                  step: '00:30',
                  end: '12:00'
                }">
              </el-time-select>
              <el-time-select
                v-model="weeks[item][1]"
                :disabled="checkList.indexOf(item) === -1"
                :picker-options="{
                  start: '06:00',
                  step: '00:30',
                  end: '12:00',
                  minTime: weeks[item][0]
                }">
              </el-time-select>
              下午
              <el-time-select
                v-model="weeks[item][2]"
                :disabled="checkList.indexOf(item) === -1"
                :picker-options="{
                  start: '12:00',
                  step: '01:00',
                  end: '23:00'
                }">
              </el-time-select>
              <el-time-select
                v-model="weeks[item][3]"
                :disabled="checkList.indexOf(item) === -1"
                :picker-options="{
                  start: '12:00',
                  step: '01:00',
                  end: '23:00',
                  minTime: weeks[item][2]
                }">
              </el-time-select>
            </el-checkbox>
          </el-checkbox-group>
          <div class="remark">避节日：选填,填入数据须用英文“,”隔开 如：2017-04-03,2017-04-04</div>
          <el-input class="am-form-group" v-model="excludeDates" type="textarea"></el-input>
        </div>
        <div class="am-form-group" style="text-align: center">
          <button type="button" size="big" class="am-btn am-btn-primary" @click="handleSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import io from '../../lib/io'
  import moment from 'moment'

  export default{
    data(){
      return{
        areaTeamId: '',
        edit: false,
        list: [{
          name: ''
        }],
        remindConfig: {
          low: [{jobName: '', time: ''}],
          mid: [{jobName: '', time: ''}],
          high: [{jobName: '', time: ''}],
        },
        checkList: [],
        weeks: {
          '星期一': ['','','',''],
          '星期二': ['','','',''],
          '星期三': ['','','',''],
          '星期四': ['','','',''],
          '星期五': ['','','',''],
          '星期六': ['','','',''],
          '星期日': ['','','',''],
        },
        timeConfig: [],
        excludeDates: ''
      }
    },
    created:function(){
      let areaTeamId = this.$route.query.areaTeamId
      if (areaTeamId) {
        this.areaTeamId = areaTeamId
      }
      this.workSetupTemplateId = ''
      let info = this.$route.query.info
      if (info) {
        info = JSON.parse(info)
        this.edit = true
        this.areaTeamId = info.areaTeamId
        this.workSetupTemplateId = info.workSetupTemplateId
        this.excludeDates = info.excludeDates
        this.remindConfig = JSON.parse(info.remindConfig)
        this.timeConfig = JSON.parse(info.timeConfig)
        this.checkList = Object.keys(JSON.parse(info.timeConfig))
        this.checkList.map(val => {
          this.weeks[val][0] = this.timeConfig[val].am.split('-')[0]
          this.weeks[val][1] = this.timeConfig[val].am.split('-')[1]
          this.weeks[val][2] = this.timeConfig[val].pm.split('-')[0]
          this.weeks[val][3] = this.timeConfig[val].pm.split('-')[1]
        })
      }
    },
    watch: {
      areaTeamId () {
        this.loadTableData()
      },
    },
    computed: {
      areaTeams: function () {
        return this.$root.config.areaTeams || []
      },
    },
    methods:{
      handleSave () {
        if (this.checkList.length === 0) {
          this.$alert('请设置时间')
          return
        }
        let timeConfig = {}
        let errorMes = ''
        this.checkList.map(val => {
          if ((!this.weeks[val][0] && this.weeks[val][1]) || (this.weeks[val][0] && !this.weeks[val][1]) ||
            (!this.weeks[val][2] && this.weeks[val][3]) || (this.weeks[val][2] && !this.weeks[val][3])) {
            errorMes = '请设置完整的时间范围，上午或者下午'
          }
          timeConfig[val] = {'am': this.weeks[val][0] + '-' + this.weeks[val][1], 'pm': this.weeks[val][2] + '-' + this.weeks[val][3]}
        })
        if (errorMes) {
          this.$alert(errorMes)
          return
        }
        io.post(io.saveOrUpdateWorkSetupTemplate, {
          workSetupTemplateId: this.workSetupTemplateId,
          areaTeamId: this.areaTeamId,
          remindConfig: JSON.stringify(this.remindConfig),
          timeConfig: JSON.stringify(timeConfig),
          excludeDates: this.excludeDates,
        }, (ret) => {
          if (ret.success) {
            this.$toast('保存成功！')
            this.$router.go(-1)
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      loadTableData: function () {
        this.$showLoading()
        io.post(io.workSetupTemplate, {
          areaTeamId: this.areaTeamId
        }, (ret) => {
          this.$hiddenLoading()
          if (ret.success) {
            let info = ret.data[0]
            this.workSetupTemplateId = info.workSetupTemplateId
            this.excludeDates = info.excludeDates
            this.remindConfig = JSON.parse(info.remindConfig)
            this.timeConfig = JSON.parse(info.timeConfig)
            this.checkList = Object.keys(JSON.parse(info.timeConfig))
            this.checkList.map(val => {
              this.weeks[val][0] = this.timeConfig[val].am.split('-')[0]
              this.weeks[val][1] = this.timeConfig[val].am.split('-')[1]
              this.weeks[val][2] = this.timeConfig[val].pm.split('-')[0]
              this.weeks[val][3] = this.timeConfig[val].pm.split('-')[1]
            })
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      handleAdd (list) {
        list.push({jobName: '', time: ''})
      },
      handleDel (list) {
        list.pop()
      },
    }
  }
</script>

<style lang="less" scoped>
  .m-crm-config-set {
    .widget-body {
      width: 860px;
      float: none;
      margin: 0 auto;
    }
    .form {
      clear: both;
      padding: 0 10px;
    }
    .theme {
      color: #333;
    }
    .wrapper {
      padding: 0 10px;
      min-width: 800px;
      margin: 0 auto;
      .job-name {
        width: 200px;
        margin: 0 5px;
      }
      .title {
        color: #666;
      }
      .content {
        padding: 0px 10px;
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
      }
      .add-icon,.del-icon {
        font-size: 20px;
        color: #0b76ac;
        width: 30px;
        height: 50px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        font-weight: bolder;
      }
    }
    .el-date-editor.el-input {
      width: 132px;
      margin: 2px 10px;
    }
    .el-checkbox+.el-checkbox {
      margin-left: 0px;
    }

  }
</style>
